import React from 'react';

export default class LifeCycleComponent extends React.Component{
  constructor(props){
    super(props)
    this.state={
        count:0
    }
    this.divRef=React.createRef()
  }
  static getDerivedStateFromProps(nextProps, prevState){
    //  console.log("getDerivedStateFromProps",nextProps)
    //  console.log("getDerivedStateFromProps",prevState)
     return prevState
  }
  
  addCount(){
      this.setState({
          count:this.state.count+1
      })
  }
   shouldComponentUpdate(nextProps,nextState){
    //   console.log("shouldComponentUpdate",nextProps)
    //   console.log("shouldComponentUpdate",nextState)
      return false
   }

  render(){
    return(
        <div ref={this.divRef} style={{border: 'solid 5px red', width: '200px', height: '200px'}}>
         count:{this.state.count}
         
         <button onClick={e=>this.addCount()}>addCount</button>
         姓名：{this.props.name}
         年龄：{this.props.age}   
        </div>
    )
  }
  getSnapshotBeforeUpdate(prevProps, prevState){
   console.log(111)   
   console.log(prevProps)
   console.log(prevState)
   console.log(this.divRef.current.offsetWidth)
   return this.divRef.current.offsetWidth
  }
  componentDidUpdate(prevProps, prevState, snapshot){
  console.log(222)
  console.log(prevProps,prevState,snapshot)
  }
  
  componentDidMount(){
      console.log("componentDidMount")
  }


  componentWillUnmount(){
      console.log("componentWillUnmount")
  }
}

